一、n 個一定要學會 lodash.js 的理由

是的，看大標小標就知道我有多推薦大家使用這個套件！在本篇系列文第一天就有提到，主軸之一包含一些日常開發時超級常用的好幫手，第一個要介紹的就是 lodash.js 啦～

有一句話叫做「If you understand Objects, you understand Javascript」(註1)，剛開始寫網頁時，很常在陣列和物件中打轉，有時候只是要做一件小事，你用原生 Javascript 的話需要寫一大常串語法跑迴圈等等才能做到，在 lodash 的世界裡卻是輕鬆可得。他們的官網也列出了三大使用的理由：

1. Iterating arrays, objects, & strings
2. Manipulating & testing values
3. Creating composite functions

如果你也厭倦了程式碼的冗長無比，或偷偷在程式碼編輯器裡塞一些快捷鍵就為了快速產生一些常用語法，也許你可以給這個套件一個機會，認識認識它(?)

二、lodash.js 的簡單介紹

安裝的部分，因為官方文件(文末有提供官方文件連結/註2)都說明，網路上也很多教學，這邊就不再贅述。

1. 引用

一開始用這個套件時，我也不是自己找到的，一定都是公司前輩傳承下來的專案裡有使用，我才知道的(就如同各位新手一樣)，可是隨著開發越久，回頭維護時我就發現 奇怪！為什麼網頁 loading 越來越久了，仔細確認過比較久的頁面，都有使用到什麼才發現咦我的 lodash 好像引用一整包了！上網查找(註3)才發現原來有更適合的引用方式，因為我覺得這個滿重要的，所以有特別列出來與直接粗體重點好方法給大家，讓我們一起寫好 code 吧！
總結：偷懶的話可以用方法一，最推薦當然就是方法三，因為時間與篇幅有限，推薦大家可以到這篇文章—「lodash | 如何正確的 import lodash」(註4)仔細瞭解三種方法的差異性。

// 方法一：整包引入
import _ from 'lodash';

// 方法二：到指定檔案拿出指定的 function
import has from 'lodash/isNil';

// 方法三：透過 babel 插件，在整包 package裡拿指定的 function
import { has } from 'lodash';

2. 使用

承第1點所述，使用到幾個方法就從套件裡取用幾個，要養成好習慣唷～

範例：比較兩個陣列，並回傳不同的項目

import { isEmpty } from 'lodash';
const arr1 = [3, 2, 1];
const arr2 = [4, 2];

// 回傳1, 3
console.log(_.difference(arr1, arr2)); 

三、實際範例

以下就舉簡單的兩個例子給大家看一下 lodash 到底有多簡潔。

範例1：袋子是不是空的呢？

import { isEmpty } from 'lodash';

const bag = [
    {
        id: 1,
        name: 'apple'
    },
    {
        id: 2,
        name: 'orange'
    },
    {
        id: 3,
        name: 'banana'
    },
];

// 方法一：傳統方式
let answer;
if(bag.length < 0){
    answer = true;
}else {
    answer = false;
}

// 方法二：lodash
let answer = !_.isEmpty(bag)

範例2：你知道袋子裡有多少香蕉嗎？

import { has } from 'lodash';

const bag = [
    {
        id: 1,
        name: 'apple',
        count: 20
    },
    {
        id: 2,
        name: 'orange',
        count: 3
    },
    {
        id: 3,
        name: 'banana'
    },
];

// lodash
let amount = bag.filter((item) => {
    if(item.name === 'banana' && _.has(item, 'count')){
        return item.count
    }
})

好啦，簡單的介紹就到這邊，有用過的人，可以也跟我分享看看你最常用的是哪個 function 嗎？

註1：JavaScript Objects
註2：lodash 官方網站, lodash 中文文檔, lodash 英文文檔
註3：Correct way to import lodash
註4：lodash | 如何正確的 import lodash>